<script setup lang="ts">
import {useIndex} from './hooks/useIndex';
const {
  seachIcon,
        formInputMap,
        searchValue,
        typeMode,
        typeModeMap,
        footerBtns
}=useIndex()
</script>

<template>
  <div class="container">
    <div class="header">
      <NavBar title="" :showRightIcon="false" />
      <div class="nav-title-box">
        <div class="nav-title-box-title">{{ typeModeMap[typeMode].title }}</div>
        <div class="nav-title-box-info">{{ typeModeMap[typeMode].titleInfo }}</div>
        <div v-if="['form'].includes(typeMode)" class="search-middle">
          <van-field :left-icon="seachIcon" v-model="searchValue" clearable placeholder="搜索" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="real-name-box">
        <LanguageList v-if="['form'].includes(typeMode)" />
        <div class="real-name-box-name">
          <div v-if="['name'].includes(typeMode)">
            <FormInput v-model="formInputMap.name" title="姓" />
            <FormInput v-model="formInputMap.num" title="名" />
          </div>
          <div v-if="['proofOfIdentity'].includes(typeMode)">
            <ProofOfIdentityList />
          </div>
          <div v-if="['last'].includes(typeMode)">
            <div class="last-upload-title">证件照片上传</div>
            <div class="last-upload-list">
              <div class="last-upload-list-content flex between">
                <div class="last-upload-list-content-left">
                  <div class="last-upload-list-content-left-top">
                    人像面
                  </div>
                  <div class="last-upload-list-content-left-bom">
                    请上传身份证人像面
                  </div>
                </div>
                <div class="last-upload-list-content-right">
                  <img src="@/assets/images/icon/my-account/sfzz.png" />
                </div>
              </div>
            </div>
            <div class="last-upload-list">
              <div class="last-upload-list-content flex between">
                <div class="last-upload-list-content-left">
                  <div class="last-upload-list-content-left-top">
                    国徽面
                  </div>
                  <div class="last-upload-list-content-left-bom">
                    请上传身份证国徽面
                  </div>
                </div>
                <div class="last-upload-list-content-right">
                  <img src="@/assets/images/icon/my-account/sfzf.png" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="['last'].includes(typeMode)" class="footer flex middle between">
      <FooterBtn class="cut-out-buttons cut-out-buttons-mr" @footerBtn="footerBtns(typeMode)" title="重新上传" />
      <FooterBtn @footerBtn="footerBtns(typeMode)" title="下一步" />
    </div>
    <div v-else class="footer">
      <FooterBtn @footerBtn="footerBtns(typeMode)" title="下一步" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.nav-title-box {
  padding: 8px 10px 0;

  &-title {
    font-size: 12px;
    font-weight: 600;

  }

  &-info {
    font-size: 7.5px;
    font-weight: 400;
    color: #777777;
    margin-top: 8px;
    line-height: 10px;
    letter-spacing: 0em;
    margin-bottom: 6px;
  }
}

.real-name-box {
  padding: 6px 10px;

  &-name {
    margin-top: 5px;
  }

  .last-upload-title {
    font-size: 8px;
    font-weight: 500;
    margin-bottom: 6px;
  }

  .last-upload-list {
    width: 100%;
    height: 60px;
    border-radius: 6px;
    background-color: #F7F7F7;
    margin-bottom: 8px;

    &-content {
      height: 100%;
      padding: 8px;

      &-left {
        &-top {
          font-size: 8px;
          font-weight: 500;
          margin-bottom: 6px;
          margin-top: 8px;
        }

        &-bom {
          font-size: 6px;
          font-weight: 400;
          color: #777777;

        }
      }

      &-right {
        &>img {
          width: 68px;
          height: 44px;
        }
      }
    }
  }
}
</style>
